"use client";

import { FaPlay } from 'react-icons/fa';
import { useRouter } from 'next/navigation';

import Image from 'next/image';

interface ListItemProps {
  image: string;
  name: string;
  href: string;
}

const ListItem: React.FC<ListItemProps> = ({
  image,
  name,
  href
}) => {
  const router = useRouter();

  const onClick = () => {
    //跳转前会有权限校验，仅允许有登录的用户才可以进行跳转
    //点击列表项盒子会路由跳转至指定的地址
    router.push(href);
  }

  return (
    // 复用button组件 并定为一个空白的带背景色盒子
    <button onClick={onClick} className="
    relative
    group
    flex
    items-center
    rounded-md
    overflow-hidden
    gap-x-4
    bg-neutral-100/10
    hover:bg-neutral-100/20
    transtion
    pr-4
  ">
    {/* 左侧收藏喜爱图片 或 专辑图图片 */}
    <div className="
      relative
      min-h-[64px]
      min-w-[64px]
    ">  
      <Image 
        className="object-cover"
        fill
        src={image}
        alt="Image"
        sizes={'28'}
      />
    </div>
    {/* 中间文字描述 喜欢的歌曲 */}
    <p className="
      font-medium
      truncate
      py-5
    ">{name}</p>
    {/* 右侧播放按钮 */}
    <div className="
      absolute
      transtion
      opacity-0
      rounded-full
      flex
      items-center
      justify-center
      bg-green-500
      p-4
      drop-shadow-md
      right-5
      group-hover:opacity-100
      hover:scale-110
    ">
      <FaPlay className="text-black"/>
    </div>
  </button>
  )
}

export default ListItem;